@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic);
a {
  text-decoration: none;
  display: block;
}
.Polygon-Bottom{
  cursor:pointer;
}
:root {
  --third_x: calc(100vw / 4);
  --viewjs: 100vw;
  --viewjs2: 1;
  --mid_x: 50vw;
  --solution_adjust: 0;
  --adjustdown: 0;
  --menu_width: 0;
  --solution-layer-pos: 0;
  --solution-layer-high: 0;
  --solution-color: #4d6073;
  --rectangle-pos: 0px;
  --dropdown-1 : 0;
  --dropdown-2 : 0;
  --dropdown-3 : 0;
  --dropdown-4 : 0;
  --dropdown-5 : 0;
  --dropdown-6 : 0;
  --dropdown-7 : 0;
  --dropdown-8 : 0;
  --dropdown-9 : 0;
  --dropdown-10 : 0;
  --dropdown-11 : 0;
  --dropdown-12 : 0;
  --dropdown-13 : 0;
  --dropdown-14 : 0;
  --dropdown-15 : 0;
  --solution1 : 1;
  --solution2 : 0.3;
  --solution3 : 0.3;
  --solution4 : 0.3;
  --solution5 : 0.3;
  --solution6 : 0.3;
  --solution7 : 0.3;
  --menu: 10px;
  --menu_thickness: 1.8px;
}
.-TOP {
  width: 100vw;
  height: 60px;
  position: fixed;
  top: 0px;
  left: 0px;
  border-bottom: 1px solid #D8D8D8;
  background-color: #ffffff;
  z-index: 2;
}
.wrapper { 
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
}
.times {
  width: 20px;
  height: 20px;
  font-family: sans-serif, FontAwesome5Pro;
  font-size: 30px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: fixed;
  top: 21px;
  right: 40px;
}
.default-button {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 60px;
  width: 200px;
}
.menu-bar {
  width: 20px;
  height: 20px;
  font-family: sans-serif, FontAwesome5Pro;
  font-size: 30px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: fixed;
  top: 21px;
  right: 40px;
}
.Layer-1 {
  width: 140px;
  height: 27px;
  position: fixed;
  top: 16px;
  left: 20px;
}
/* .-Footer {
  width: 100vw;
  height: 60px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  top: calc((650px - 102px + ((var(--dropdown-1) + var(--dropdown-2) + var(--dropdown-3) + var(--dropdown-4) + var(--dropdown-5)) * 1px)) + (206px + 60px + var(--solution-layer-high)) + 886px);
  background-color: #000000;
} */
.WeNestIm-All-Rights-Reserved {
  width: 279px;
  height: 14px;
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  text-align: center;
  color: #8d8d8d;
  position: absolute;
  bottom: 23px;
  left: calc(var(--mid_x) - (279px / 2));
  background-color: #1f1f1f;
  top: 10px;
}
.Menu-Side-Layer {
  width: 0px;
  height: calc(100vh - 60px);
  position: fixed;
  top: 60px;
  right: 0px;
  background-color: #ffffff;
  z-index: 3;
  overflow-x: hidden;
  transition: 0.5s;
}

.Menu-Solution-Layer {
  width: var(--menu_width);
  height: 450px;
  position: absolute;
  top: 40px;
  right: 0px;
  background-color: #f2f2f2;
}
.Menu-Services-Layer {
  width: var(--menu_width);
  height: 140px;
  position: absolute;
  top: calc((var(--solution_adjust) * 1px) + (40px));
  right: 0px;
  background-color: #f2f2f2;
}
.chevron-up {
  width: 11px;
  height: 7px;
  font-family: sans-serif, FontAwesome5ProSolid;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
}
.chevron-down {
  width: 11px;
  height: 7px;
  font-family: sans-serif, FontAwesome5ProSolid;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
}
.solution_chevron {
  width: 11px;
  height: 7px;
  font-family: sans-serif, FontAwesome5ProSolid;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 16px;
  right: 30px;
  margin-top:-6;
  transition: 0.4s;
}
.rotate {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform-origin: center;
  top: 33px;
  right: 18px;
} 
.solution_chevron_up {
  visibility: hidden;
  width: 11px;
  height: 7px;
  font-family: sans-serif, FontAwesome5ProSolid;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 16px;
  right: 30px;
  margin-top:-6;
  transition: 0.4s;
}
.services_chevron {
  width: 11px;
  height: 7px;
  font-family: sans-serif, FontAwesome5ProSolid;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 16px;
  right: 30px;
  margin-top:-6;
  transition: 0.4s;
}
.rotate-up {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  right: 22px;
  top: 30px;
}
.services_chevron_down {
  visibility: hidden;
  width: 11px;
  height: 7px;
  font-family: sans-serif, FontAwesome5ProSolid;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 16px;
  right: 40px;
  margin-top:-6;

}
.SOLUTIONS-Backend {
  width: calc(var(--menu_width) * 0.7);
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  border-bottom: 1px solid #D8D8D8;
  /* border-top: 2px solid #505050; */
}
.SOLUTIONS {
  width: 86px;
  height: 12px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 11px;
  left: 19px;
}
.solution-top {
  background-color: #f5f5f5;
  width: calc(var(--menu_width) * 0.7);
  height: calc(var(--solution_adjust) * 1px + 6px);
  position: absolute;
  top: 40px;
  right: 0px;
  border-top: 1px solid #D8D8D8;
  overflow-y: hidden;
  transition: 0.5s;
}
.services-top {
  background-color: #f5f5f5;
  width: calc(var(--menu_width) * 0.7);
  height: calc(var(--service_adjust) * 1px);
  position: absolute;
  top: 40px;
  right: 0px;
  border-top: 1px solid #D8D8D8;
  overflow-y: hidden;
  transition: 0.5s;
}
.SERVICES-Backend {
  width: calc(var(--menu_width) * 0.7);
  height: 40px;
  position: absolute;
  top: calc((var(--solution_adjust) * 1px) + 41px);
  right: 0px;
  border-bottom: 1px solid #D8D8D8;
  /* border-top: 1px solid #505050; */
  transition: 0.5s;
}
.SERVICES {
  width: 68px;
  height: 12px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 11px;
  left: 19px;
}
.sideClose {
  visibility: hidden;
  background-color: #ffffff;
  z-index:2;
  opacity: 0.7;
  width: 100vw;
  position: fixed;
  height: calc(100vh - 60px);
  top: 60px;
  left: 0px;
  transition: 0.5s;
}
.ABOUT-US-Backend {
  width: calc(var(--menu_width) * 0.7);
  height: 40px;
  position: absolute;
  top: calc((var(--adjustdown) * 1px) + (40px * 2) + 1px);
  right: 0px;
  border-bottom: 1px solid #D8D8D8;
  transition: 0.5s;
}
.CAREER-Backend {
  width: calc(var(--menu_width) * 0.7);
  height: 40px;
  position: absolute;
  top: calc((var(--adjustdown) * 1px) + (40px * 3) + 1px);
  right: 0px;
  border-bottom: 1px solid #D8D8D8;
  transition: 0.5s;
}
.CAREER {
  width: 87px;
  height: 12px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 11px;
  left: 19px;
}
.ABOUT-US {
  width: 87px;
  height: 12px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 11px;
  left: 19px;
}
.RESOURCES-Backend {
  width: calc(var(--menu_width) * 0.7);
  height: 40px;
  position: absolute;
  top: calc((var(--adjustdown) * 1px) + (40px * 4) + 1px);
  right: 0px;
  border-bottom: 1px solid #D8D8D8;
  /* border-top: 1px solid #505050; */
  transition: 0.5s;
}
.RESOURCES {
  width: 86px;
  height: 12px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 11px;
  left: 19px;
}
.INQUIRY-Backend {
  width: calc(var(--menu_width) * 0.7);
  height: 40px;
  background-color: #70bdad;
  position: absolute;
  top: calc((var(--adjustdown) * 1px) + (40px * 5));
  right: 0px;
  /* border-bottom: 2px solid #505050;
  border-top: 2px solid #505050; */
  transition: 0.5s;
}
.INQUIRY {
  width: 62px;
  height: 14px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  position: absolute;
  top: 11px;
  left: 19px;
}
.SAP-ERP {
  height: 10px;
  font-family: 'Open Sans bold',sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.14;
  letter-spacing: normal;
  text-align: left;
  color: #999999;
  position: absolute;
  top: 14px;
  left: 20px;
}
.--Easy-Accounting-for-SAP {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 47px;
  margin-left: 20px;
  margin-right: 20px;
}
.--PA-Accelerator-for-SAP {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: calc(47px + (14px * 2.5));
  margin-left: 20px;
  margin-right: 20px;
}
.--Costing-Cockpit-for-SAP {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: calc(47px + (14px * 2.5 * 2));
  margin-left: 20px;
  margin-right: 20px;
}
.--Mobile-Plant-Maintenance-for-SAP {
  width: calc(100% - 20px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: calc(47px + (14px * 2.5 * 3));
  margin-left: 20px;
  margin-right: 0px;
}
.solution-line-1 {
  width: calc(var(--menu_width) * .65);
  height: 1px;
  position: absolute;
  top: 188px;
  left: calc(var(--menu_width) * .025);
  background-color: #D8D8D8;
}
.SAP-BI {
  height: 10px;
  font-family: 'Open Sans bold',sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.14;
  letter-spacing: normal;
  text-align: left;
  color: #999999;
  position: absolute;
  top: 194px;
  left: 20px;
}
.--Business-Analytical-Applications-Using-SAP-Fiori {
  width: calc(100% - 20px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 223px;
  margin-left: 20px;
  margin-right: 0px;
}
.solution-line-2 {
  width: calc(var(--menu_width) * .65);
  height: 1px;
  position: absolute;
  top: 270px;
  left: calc(var(--menu_width) * .025);
  background-color: #D8D8D8;
}
.WeNestIm-ERP {
  width: 115px;
  height: 10px;
  font-family: 'Open Sans bold',sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.14;
  letter-spacing: normal;
  text-align: left;
  color: #999999;
  position: absolute;
  top: 280px;
  left: 20px;
}
.--Accounting {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 305px;
  margin-left: 20px;
  margin-right: 20px;
}
.--Logistics {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: calc(305px + (14px * 2.5));
  margin-left: 20px;
  margin-right: 20px;
}
.--Production {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: calc(305px + (14px * 2.5 * 2));
  margin-left: 20px;
  margin-right: 20px;
}
.--WeNestIm-TMX-for-Production {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.29;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 417px;
  margin-left: 20px;
  margin-right: 20px;
}
.solution-line-3 {
  width: calc(var(--menu_width) * 0.65);
  height: 1px;
  position: absolute;
  top: 410px;
  left: calc(var(--menu_width) * .025);
  background-color: #D8D8D8;
}
.--Implementation {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: 22px;
  margin-left: 20px;
  margin-right: 20px;
}
.--Support {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: calc(22px + (14px * 2.5));
  margin-left: 20px;
  margin-right: 20px;
}
.--Training-and-Education {
  width: calc(100% - 40px);
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  position: absolute;
  top: calc(22px + (14px * 2.5 * 2));
  margin-left: 20px;
  margin-right: 20px;
}
.Solutions2 {
  width: 320px;
  height: 25px;
  font-family: 'Open Sans',sans-serif;
  font-size: 33px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.06;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  position: absolute;
  top: 90px;
  left: calc(var(--mid_x) - (320px / 2));
}
.solutions-layer {
  content: "";
  width: 100vw;
  display: inline-block;
  height: var(--solution-layer-high);
  background-color: var(--solution-color);
  position: absolute;
  top: var(--solution-layer-pos);
}
.rectangle {
  position: absolute;
  top: calc(var(--rectangle-pos) + (var(--solution-layer-pos) - 206px));
  /*left: calc(var(--mid_x) - (162px));*/
  margin-left: calc(var(--viewjs2) * 20px);
}
.Rounded-Rectangle-1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 162px;
  height: 43px;
  background: url('../Image/btn_solutions_brochure.svg') no-repeat top center;
}
.Rounded-Rectangle-1:hover {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 162px;
  height: 43px;
  background: url('../Image/btn_solutions_brochure_over.svg') no-repeat top center;
}
.Rounded-Rectangle-2 {
  position: absolute;
  left: 162px;
  top: 0px;
  width: 162px;
  height: 43px;
  background: url('../Image/btn_solutions_demo_over.svg') no-repeat top center;
}
.Rounded-Rectangle-2:hover {
  position: absolute;
  left: 162px;
  top: 0px;
  width: 162px;
  height: 43px;
  background: url('../Image/btn_solutions_demo.svg') no-repeat top center;
}
.demo_layer {
  position: fixed;
  top: 60px;
  left: 0px;
  height: calc(100vh - 60px);
  width: 100vw;
  background-color: #000000;
}
.demo-submit {
  width: 160px;
  height: 46px;
  position:relative;
  top: 34px;
  left: calc(50vw - (160px / 2));/*calc(1199px - 806px);*/
}
.fieldOuter-demo label {
  position: absolute;
  left: 57px;
  top: 2px;
  line-height:15px;
  overflow: hidden;
  color: #777777;
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

}
.fieldOuter-demo input:focus + label {
  opacity: 1;
  top: 2px;
  color: #5ad2bc;
}
.fieldOuter-demo input:focus {
  border: solid 1px #5ad2bc;
}
.fieldOuter-demo {
  position: relative;
  margin: 0 0 15px 0;
  font-family: sans-serif, impact;
  font-size: 16px;
}
::-webkit-input-placeholder {
  font-size: 14px;
}
::-moz-placeholder {
  font-size: 14px;
}
:-ms-input-placeholder {
  font-size: 14px;
}
::placeholder {
  font-size: 14px;
}

.fieldOuter {
  position: relative;
  margin: 0 0 15px 0;
  font-family: sans-serif, impact;
  font-size: 16px;
}
.fieldOuter-demo input {
  padding: 10px;
  width: calc(100vw - 90px);
  height: 50px;
  border-radius: 5px;
  border: solid 1px #777777;
  background-color: #000000;
  color: #ffffff;
  text-align: left;
  position: relative;
  left: 45px;
  font-family: 'Open Sans',sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.11;
  letter-spacing: normal;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.demo-message {
  width: calc(100vw - 90px);
  height: 112px;
  border-radius: 8px;
  border: solid 1px #777777;
  background-color: #000000;
  text-align: left;
  left: 45px;
  position: relative;
  color: #ffffff;
  font-family: 'Open Sans',sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.11;
  letter-spacing: normal;
}
.demoForm {
  position: absolute;
  top: 60px;
  left: 0px;
}
.Request-DEMO {
  width: 142px;
  height: 19px;
  font-family: 'Open Sans',sans-serif;
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  position: absolute;
  top: 15px;
  left: 45px;
}
.demo_layer a {
  padding: 10px 10px 10px 32px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
}
.demo_layer a:hover {
  color: #f1f1f1;
}
.demo_layer .closebtn {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 36px;
  margin-right: 20px;
}
.demoClose {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vw;
  background-color: #111;
  opacity: 0.9;
}
.demo-message:focus::placeholder {
  visibility:hidden;
}
.demo-message:focus {
  border: solid 3px #5ad2bc;
  background-color: #000000;
}
.fieldOuter input:focus::placeholder {
  visibility:hidden;
}
.fieldOuter input:focus {
  top: 0px;
  border: solid 2px #5ad2bc;
}
.fieldOuter-demo input:focus::placeholder {
  visibility:hidden;
}
.fieldOuter-demo input:focus + label {
  opacity: 1;
  top: 2px;
  color: #5ad2bc;
}
.fieldOuter input:focus + label {
  opacity: 1;
  top: 2px;
  color: #5ad2bc;
}
.fieldOuter :not(:placeholder-shown) + label {
  opacity:1;
  top: 2px;
}
.fieldOuter-demo :not(:placeholder-shown) + label {
  opacity:1;
  top: 2px;
}
*:focus {
  outline: none;
}
.menu-trigger a {
  position: absolute;
  top: 19px;
  right: 0px;
}
.menu-trigger {
  margin-right: 15px;
  position: absolute;
  top: 20px;
  right: 0px;
  width: 24px;
  height: calc((2 * var(--menu)) + var(--menu_thickness) - 1px);
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--menu_thickness);
  background-color: #333333;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: var(--menu);
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active-1 span:nth-of-type(1) {
  -webkit-transform: translateY (var(--menu)) rotate (-45deg);
  transform: translateY(var(--menu)) rotate(-45deg);
}
.menu-trigger.active-1 span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active-1 span:nth-of-type(3) {
  -webkit-transform: translateY(calc(-1 * var(--menu))) rotate(45deg);
  transform: translateY(calc(-1 * var(--menu))) rotate(45deg);
}

.menu-trigger.type7 span:nth-of-type(1) {
    -webkit-animation : menu-bar07-01 .75s forwards;
    animation : menu-bar07-01 .75s forwards;
}
@-webkit-keyframes menu-bar07-01 {
    0% {
        -webkit-transform : translateY(var(--menu)) rotate(45deg);
    }
    50% {
        -webkit-transform : translateY(var(--menu)) rotate(0);
    }
    100% {
        -webkit-transform : translateY(0) rotate(0);
    }
}
@keyframes menu-bar07-01 {
    0% {
        transform : translateY(var(--menu)) rotate(45deg);
    }
    50% {
        transform : translateY(var(--menu)) rotate(0);
    }
    100% {
        transform : translateY(0) rotate(0);
    }
}
.menu-trigger.type7 span:nth-of-type(2) {
    transition : all .25s .25s;
    opacity : 1;
}
.menu-trigger.type7 span:nth-of-type(3) {
    -webkit-animation : menu-bar07-02 .75s forwards;
    animation : menu-bar07-02 .75s forwards;
}
@-webkit-keyframes menu-bar07-02 {
    0% {
        -webkit-transform : translateY(calc(-1 * var(--menu))) rotate(-45deg);
    }
    50% {
        -webkit-transform : translateY(calc(-1 * var(--menu))) rotate(0);
    }
    100% {
        -webkit-transform : translateY(0) rotate(0);
    }
}
@keyframes menu-bar07-02 {
    0% {
        transform : translateY(calc(-1 * var(--menu))) rotate(-45deg);
    }
    50% {
        transform : translateY(calc(-1 * var(--menu))) rotate(0);
    }
    100% {
        transform : translateY(0) rotate(0);
    }
}
.menu-trigger.active-7 span:nth-of-type(1) {
    -webkit-animation : active-menu-bar07-01 .75s forwards;
    animation : active-menu-bar07-01 .75s forwards;
}
@-webkit-keyframes active-menu-bar07-01 {
    0% {
        -webkit-transform : translateY(0) rotate(0);
    }
    50% {
        -webkit-transform : translateY(var(--menu)) rotate(0);
    }
    100% {
        -webkit-transform : translateY(var(--menu)) rotate(45deg);
    }
}
@keyframes active-menu-bar07-01 {
    0% {
        transform : translateY(0) rotate(0);
    }
    50% {
        transform : translateY(var(--menu)) rotate(0);
    }
    100% {
        transform : translateY(var(--menu)) rotate(45deg);
    }
}
.menu-trigger.active-7 span:nth-of-type(2) {
    opacity : 0;
}
.menu-trigger.active-7 span:nth-of-type(3) {
    -webkit-animation : active-menu-bar07-02 .75s forwards;
    animation : active-menu-bar07-02 .75s forwards;
}
@-webkit-keyframes active-menu-bar07-02 {
    0% {
        -webkit-transform : translateY(0) rotate(0);
    }
    50% {
        -webkit-transform : translateY(calc(-1 * var(--menu))) rotate(0);
    }
    100% {
        -webkit-transform : translateY(calc(-1 * var(--menu))) rotate(-45deg);
    }
}
@keyframes active-menu-bar07-02 {
    0% {
        transform : translateY(0) rotate(0);
    }
    50% {
        transform : translateY(calc(-1 * var(--menu))) rotate(0);
    }
    100% {
        transform : translateY(calc(-1 * var(--menu))) rotate(-45deg);
    }
}